.sp-sms {
	
	&__ {
		
		// 消息首页
		&index {
			
			.u-swipe-action-item__right__button__wrapper {
				background-color: #FF5F5F !important;
			}
			
			&- {
				
				&item {
					display: flex;
					align-items: flex-start;
					padding: 28rpx 24rpx;
					border-bottom: 1rpx solid #eee;
				}
				
				&pics {
					.square(100);
					margin-right: 24rpx;
					flex-shrink: 0;
					flex-grow: 0;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				
				&info {
					flex: 1;
					
					label,
					text {
						display: block;
					}
					
					label {
						.font(32, 46, #222, left);
					}
					
					text {
						margin-top: 8rpx;
						.font(28, 40, #bbb, left);
					}
				}
				
				&right {
					margin-left: 24rpx;
					text-align: right;
					
					// text,
					// label {
					// }
					
					text {
						display: block;
						margin-top: 6rpx;
						.font(24, 34, #bbb, right);
					}
					
					label {
						// width: auto;
						display: inline-block;
						height: 30rpx;
						.radius(24);
						margin-top: 44rpx;
						min-width: 30rpx;
						.font(22, 30, #fff);
						.back-color(#FF3737);
						padding: 0 4rpx;
						.boxing();
					}
				}
			}
		}
		
		// 系统消息列表
		&system {
			padding: 24rpx;
			
			&- {
				
				&item {
					margin-bottom: 24rpx;
					.back-color(#fff);
					.radius(20);
					padding: 24rpx 24rpx 0;
					.boxing();
				}
				
				&head {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					height: 118rpx;
				}
				
				&name {
					label,
					text {
						display: block
					}
					
					label {
						.font(30, 42, #222, left);
						margin-bottom: 12rpx;
					}
					
					text {
						.font(28, 40, #666, left);
					}
				}
				
				&del {
					.square(36);
					margin-top: 24rpx;
					background: url('@{cdn}sms/del.png') center no-repeat;
					background-size: cover;
				}
				
				&desc {
					margin-top: 24rpx;
					.font(28, 40, #666, left);
				}
				
				&more {
					margin-top: 24rpx;
					.back-color(#F9FAFB);
					padding: 12rpx 12rpx 1rpx;
					
					& > view {
						.flex();
						margin-bottom: 12rpx;
						
						label,
						text {
							display: block;
						}
						
						label {
							.font(28, 40, #666, left);
							width: 146rpx;
							flex-shrink: 0;
						}
						
						text {
							flex: 1;
							.font(28, 40, #222);
						}
					}
				}
				
				&foot {
					height: 88rpx;
					margin-top: 24rpx;
					.font(28, 88, #222, left);
					background: url('@{cdn}member/arrow.png') right center no-repeat;
					background-size: 30rpx;
					border-top: 1rpx solid #eee;
					.boxing();
				}
			}
		}
		
		// 消息设置
		&setting {
			padding: 24rpx;
			
			&- {
				
				&item {
					.flex();
					min-height: 88rpx;
					justify-content: space-between;
					padding: 24rpx;
					.back-color(#fff);
					.radius(20);
					.boxing();
					margin-bottom: 24rpx;
					
					label ,
					text {
						display: block;
					}
					
					label {
						.font(30, 42, #222, left);
					}
					
					text {
						.font(24, 32, #666, left);
						margin-top: 6rpx;
					}
				}
				
				&logout {
					
					label {
						color: #FF5F5F;
					}
				}
				
				&arrow {
					padding: 24rpx 66rpx 24rpx 24rpx;
					background: #fff url('@{cdn}member/arrow.png') 98% no-repeat;
					background-size: 30rpx;
				}
			}
		}
		
		// 评价
		&comment {
			
			&- {
				
				&alert {
					height: 80rpx;
					padding: 0 24rpx;
					.font(30, 80, #6582F9, left);
					background: #EFF5FF url('@{cdn}sms/close.png') 696rpx center no-repeat;
					background-size: 30rpx;
				}
				
				&desc {
					.size(702, 140);
					margin: 24rpx auto;
					.back-color(#fff);
					padding: 24rpx 20rpx;
					.font(28, 46, #222, left);
					.boxing();
				}
				
				&list {
					padding: 0 24rpx;
				}
				
				&item {
					.flex();
					margin-bottom: 58rpx;
				}
				
				&check {
					.square(36);
					background: url('@{cdn}sms/check.png') center no-repeat;
					background-size: cover;
					margin-right: 20rpx;
				}
				
				&checked {
					background: url('@{cdn}sms/checked.png') center no-repeat;
					background-size: cover;
				}
				
				&control {
					.flex();
					justify-content: center;
					
					.sp-button {
						width: 280rpx;
						
						&:nth-child(1) {
							margin-right: 70rpx;
							background: #F9FAFB;
							border: 1px solid #ddd;
							color: #222;
							box-shadow: 0 0 0 rgba(0, 0, 0, 0);
						}
					}
				}
				
				&content {
					padding: 0 24rpx 50rpx;
					
					textarea {
						width: 100%;
						height: 180rpx;
						background: #fff;
						.radius(20);
						.boxing();
						padding: 20rpx 24rpx;
						.font(28, 40, #222, left);
					}
				}
			}
		}
		
		// 历史病情描述
		&history {
			padding: 24rpx;
			
			&- {
				
				&item {
					position: relative;
					margin-bottom: 24rpx;
					.back-color(#fff);
					padding: 24rpx;
					.boxing();
					
					label,
					text {
						display: block;
					}
					
					label {
						width: 150rpx;
						.font(28, 40, #666, left);
					}
					
					text {
						.font(28, 40, #222, left);
					}
					
					.sp-button {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 24rpx;
						.size(136, 50);
						.radius(10);
						.font(26, 50, #fff);
					}
				}
				
				&person,
				&date {
					.flex();
				}
				
				&date {
					margin-top: 12rpx;
				}
				
				&person {
					margin-top: 24rpx;
				}
			}
		}
		
		// 新建描述
		&create {
			padding: 24rpx 24rpx 1rpx;
			
			&- {
				
				&boxes {
					.radius(20);
					.back-color(#fff);
					padding: 0 24rpx;
					margin-bottom: 24rpx;
					.boxing();
				}
				&detail {
					padding-bottom: 300rpx;
				}
				&import {
					.f-center-space();
					height: 90rpx;
					
					label,
					text {
						display: block;
					}
					
					label {
						.font(30, 42, #222, left);
					}
					
					text {
						.font(30, 42, #6582F9, left);
						padding-right: 42rpx;
						background: url('@{cdn}sms/import.png') right center no-repeat;
						background-size: 30rpx;
					}
				}
				
				&item {
					.f-center-space();
					height: 90rpx;
					
					& > text {
						.font(28, 40, #666);
						padding-right: 40rpx;
						background-image: url('@{cdn}member/arrow.png');
						background-repeat: no-repeat;
						background-position: right center;
						background-size: 30rpx;
					}
				}
				
				&title {
					.flex();
					height: 90rpx;
					// margin-bottom: 26rpx;
					
					image,
					text {
						display: block;
					}
					
					image {
						.square(38);
						margin-right: 10rpx;
					}
					
					text {
						font-weight: bold;
						.font(30, 42, #222, left);
					}
				}
				
				&patient {}
				
				&form {
					.flex();
					height: 100rpx;
					border-top: 1rpx solid #eee;
					
					label,
					input {
						display: block;
					}
					
					label {
						width: 200rpx;
						.font(28, 40, #666, left);
					}
					
					input {
						flex: 1;
						height: 100%;
						.font(28, 40, #666, left);
						border: 0;
					}
				}
				
				&textarea {
					height: 188rpx;
					.radius(10);
					margin: 0 auto 22rpx;
					
					textarea {
						display: block;
						width: 100%;
						height: 100%;
						.back-color(#F9FAFB);
						.boxing();
						padding: 24rpx;
						.font(26, 38, #666, left);
					}
				}
				
				&file {
					.flex();
					padding-bottom: 24rpx;
				}
				
				&add {
					.circle(180, 180, 20rpx);
					background: #F9FAFB url('@{cdn}sms/add.png') center no-repeat;
					background-size: 40rpx;
					margin-right: 24rpx;
				}
				
				&info {
					flex: 1;
					
					text,
					label {
						display: block;
					}
					
					text {
						.font(28, 40, #222, left);
					}
					
					label {
						.font(24, 32, #666, left);
						margin-top: 10rpx;
					}
				}
			}
		}
		
		// 主窗口
		&main {
			display: flex;
			flex-direction: column;
			height: 100%;
			
			&- {
				
				&content {
					flex: 1;
					padding: 24rpx;
					.boxing();
					overflow: hidden;
					
					._scroll {
						height: 100%;
						min-height: 500rpx;
					}
				}
				
				// 提示
				&alert {
					.flex();
					.size(750, 90);
					.back-color(rgba(255, 129, 30, .1));
					.boxing();
					padding: 0 24rpx;
					
					label,
					text {
						display: block;
						.font(30, 42, #FF811E, left);
					}
					
					label {
						background: url('@{cdn}sms/icon-warning.png') left center no-repeat;
						background-size: 40rpx;
						font-weight: bold;
						padding-left: 52rpx;
					}
					
					text {
						margin-left: 20rpx;
					}
				}
				
				// 提示
				&tips {
					// margin-top: 24rpx;
					padding: 12rpx 20rpx;
					background: #eee;
					width: 638rpx;
					margin: 24rpx auto 0;
					.radius(20);
					.boxing();
					.font(24, 32, #666, left);
				}
				
				// 时间
				&time {
					.font(24, 56, #bbb);
				}
				
				// 聊天信息框
				&chat {
					.flex();
					.boxing();
					align-items: flex-start;
					margin-top: 24rpx;
					
					&- {
						
						&avatar {
							image {
								display: block;
								.circle(72, 72, 50%);
							}
						}
						
						&inner {
							padding: 0 10rpx;
						}
						
						&line {
							flex: 1;
							margin: 0 10rpx;
						}
						
						&text,
						&pics {
							display: inline-block;
							padding: 16rpx 24rpx;
							.boxing();
						}
					}
				}
				
				&he {
					flex-direction: row-reverse;
					padding-left: 110rpx;
					
					.sp-sms__main-chat-text {
						.font(28, 40, #fff, right);
						background: #6582F9;
						border-radius: 20px 0px 20px 20px;
					}
				}
				
				&me {
					padding-right: 110rpx;
					
					.sp-sms__main-chat-text {
						.font(28, 40, #222, left);
						background: #FFFFFF;
						border-radius: 0px 20px 20px 20px;
					}
				}
				
				// 诊疗卡
				&card {
					
					&- {
						
						&header {
							position: relative;
							.size(538, 100);
							.font(32, 46, #222);
							padding-top: 20rpx;
							background: url('@{cdn}sms/title.png') center no-repeat;
							background-size: cover;
							.boxing();
							
							&:after {
								content: '';
								position: absolute;
								top: 86rpx;
								left: 50%;
								transform: translateX(-50%);
								.size(490, 1);
								.back-color(#eee);
							}
						}
						
						&bodyer {
							position: relative;
							.size(538, 373);
							.back-color(#fff);
							.boxing();
							padding: 8rpx 24rpx;
							
							&:after {
								content: '';
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								.size(490, 1);
								.back-color(#eee);
							}
							
							label,
							text {
								display: block;
							}
							
							label {
								.font(24, 34, #bbb, left);
								margin-bottom: 4rpx;
							}
							
							text {
								.font(28, 40, #222, left);
								.text-overflow-one();
								margin-bottom: 12rpx;
							}
						}
						
						&footer {
							.size(538, 82);
							.back-color(#fff);
							.font(30, 82, #6582F9);
							border-radius: 0 0 20rpx 20rpx;
						}
					}
				}
				
				// 最下面操作框
				&footer {
					width: 100%;
					background: #F6F6F6;
					
					&- {
						
						&content {
							.f-center-space();
							// .size(750, 112);
							width: 750rpx;
							padding: 16rpx 24rpx;
							.boxing();
						}
						
						&text {
							.flex();
							width: 550rpx;
							margin: 0 auto;
							background: #fff;
							.radius(10);
							min-height: 80rpx;
							padding: 20rpx;
							.boxing();
							
							textarea {
								display: block;
								width: 100%;
								.font(28, 40, #222, left)
							}
							
							& > view {
								text-align: center;
								font-weight: bold;
							}
							
							text {
								display: block;
								padding: 14rpx 24rpx;
								font-size: 24rpx;
								background: #6582F9;
								color: #fff;
								margin-right: 20rpx;
							}
						}
						
						&key,
						&add,
						&audio {
							.square(52);
							background-repeat: no-repeat;
							background-size: cover;
							background-position: center;
						}
						
						&key {
							background-image: url('@{cdn}sms/icon-key.png');
						}
						
						&add {
							background-image: url('@{cdn}sms/icon-add.png');
						}
						
						&audio {
							background-image: url('@{cdn}sms/icon-audio.png');
						}
						
						&choose {
							.flex();
							padding: 30rpx 10rpx 80rpx;
							.boxing();
						}
						
						&item {
							width: 120rpx;
							margin: 0 30rpx;
							
							& > view {
								.f-center();
								.circle(120, 120, 20rpx);
								.back-color(#fff);
								margin-bottom: 13rpx;
								
								image {
									display: block;
									.square(50);
								}
							}
							
							text {
								display: block;
								.font(24, 32, #666);
							}
						}
					}
				}
			}
		}
		
		// 结束弹窗
		&end {
			// .size(590, 476);
			width: 590rpx;
			overflow: hidden;
			
			&- {
				
				&title {
					label,
					text {
						display: block;
					}
					
					label {
						padding: 39rpx 0 19rpx;
						.font(32, 45, #222);
						font-weight: bold;
					}
					
					text {
						.font(28, 40, #666);
					}
				}
				
				&list {
					.flex();
					justify-content: center;
					padding: 58rpx 0;
				}
				
				&item {
					width: 140rpx;
					
					&:nth-child(1) {
						margin-right: 86rpx;
					}
					
					image,
					text {
						display: block;
					}
					
					image {
						.square(100);
						margin: 0 auto 18rpx;
					}
					
					text {
						.font(28, 40, #666);
					}
				}
			}
		}
	}
}